<script setup lang="ts">
import { ElTabPane, ElTabs } from 'element-plus'
import type { Image } from '~/types'
import { getProjectsDetail } from '~/service/projects'

clearNuxtData()
const { locale } = useLocale()
const route = useRoute('project-id')

useHeader('light')

function scrollIntoView(el: HTMLElement | null) {
  el?.scrollIntoView({ behavior: 'smooth' })
}

const briefRef = ref<HTMLElement | null>(null)
const tagRef = ref<HTMLElement | null>(null)
const detailRef = ref<HTMLElement | null>(null)
const tabKey = ref('brief')
watch(tabKey, (n) => {
  if (n === 'brief' && briefRef.value)
    scrollIntoView(briefRef.value)
  if (n === 'tag' && tagRef.value)
    scrollIntoView(tagRef.value)
  if (n === 'detail' && detailRef.value)
    scrollIntoView(detailRef.value)
})

useIntersectionObserver(briefRef, ([ins]) => {
  if (ins?.isIntersecting)
    tabKey.value = 'brief'
})

const data = ref<any>({})

// const imageList = computed(() => ((safeJSONParse(data.value?.img_list, [])) as Image[]).map((item, index) => ({ ...item, index })))
// const tags = computed(() => get(data.value, 'tag', locale.value)?.split?.(',') || [])
// onMounted(async () => {
//   data.value = await getProjectsDetail({ id: route.params.id })
//   useHead({
//     title: `${data.value.name}-超益钢业`,
//   })
// })
const { data: detailData } = await useAsyncData(async () => await getProjectsDetail({ id: route.params.id }))
data.value = detailData.value
const imageList = computed(() => ((safeJSONParse(data.value?.img_list, [])) as Image[]).map((item, index) => ({ ...item, index })))
const tags = computed(() => get(data.value, 'tag', locale.value)?.split?.(',') || [])
useHead({
  title: `${data.value.name}-超益钢业`,
})
</script>

<template>
  <div>
    <div h="[var(--header-height)]" bg="#fff"></div>
    <div max-md:hidden>
      <SwiperImages :navigator="false" :images="imageList" :thumbnail-count="9" preview-width="100%" preview-height="828px" />
    </div>
    <div hidden max-md:block>
      <SwiperImages :navigator="false" :images="imageList" :thumbnail-count="9" preview-width="100%" preview-height="400px" />
    </div>

    <div bg="[#fff]" p="b-[145px] x-[94px] max-md:[var(--padding-x-wrap-md)]">
      <ElTabs v-model="tabKey" class="mb-[40px] max-md:mb-[12px]">
        <ElTabPane name="brief" :label="$t('projects.brief')" />
        <ElTabPane name="tag" :label="$t('projects.tag')" />
        <ElTabPane name="detail" :label="$t('projects.detail')" />
      </ElTabs>

      <main class="mx-auto w-[1100px] flex flex-col">
        <section ref="briefRef" m="b-[60px]" leading="[40px]">
          <h2 text="[28px] max-md:[18px]" leading="[40px] max-md:[28px]" m="b-[40px] max-md:b-[8px]" font="medium">
            {{ $t('projects.brief') }}
          </h2>
          <div text="[20px] max-md:[14px] [#5F6464]" leading="[40px] max-md:[24px]" v-html="get(data, 'introduction', locale) || ''" />
        </section>
        <section ref="tagRef" m="b-[60px]" leading="[40px]">
          <h2 text="[28px] max-md:[18px]" leading="[40px] max-md:[28px]" m="b-[40px] max-md:b-[8px]" font="medium">
            {{ $t('projects.tag') }}
          </h2>
          <ul class="flex items-center">
            <li v-for="t in tags" :key="t" class="tag">
              {{ t }}
            </li>
          </ul>
        </section>
        <section ref="detailRef" m="b-[60px]" leading="[40px]">
          <h2 text="[28px] max-md:[18px]" leading="[40px] max-md:[28px]" m="b-[40px] max-md:b-[8px]" font="medium">
            {{ $t('projects.detail') }}
          </h2>
          <div text="[20px] max-md:[14px] [#5F6464]" leading="[40px] max-md:[24px]" v-html="replaceImgUrl(get(data, 'detail', locale) || '')" />
        </section>
      </main>
    </div>
  </div>
</template>

<style lang="postcss" scoped>
.tag {
  color: var(--color-text-secondary);
  background-color: rgba(31, 31, 31, 0.06);
  @apply px-[12px] py-[4px] text-[16px] max-md:text-[12px];
}
.tag + .tag {
  margin-left: 12px;
}
</style>
